<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="my" tagdir="/WEB-INF/tags" %>

	<script src="/WebshopITE/pages/static/jquery/jquery-1.4.4.js" type="text/javascript"></script>	

	<script type="text/javascript">
	
		function initMenu() {
		  $('#MainMenu ul').hide();
		  $('.defaultOpen').show();
		  $('#MainMenu li a').click(
		    function() {
		        $(this).next().slideToggle('normal');	
		      }
		    );
		  }
		$(document).ready(function() {initMenu();});
	</script>

	<style type="text/css">
			ul.menu, ul.menu ul {
			  list-style-type:none;
			  margin: 0;
			  padding: 0;
			  width: 15em;
			}
			
			ul.menu a {
			  display: block;
			  text-decoration: none;
			  font-family: sans-serif;
			}
			
			ul.menu li {
			  margin-top: 1px;
			}
			
			ul.menu li a {
			  background: #333;
			  color: #fff;	
			  padding: 0.5em;
			}
			
			ul.inner1 li a{
				font-size:small;
			  	background: #333;
			  	color: #fff;	
			  	padding: 0.5em;			
			}
			
			ul.menu li a:hover {
			 	background: #000;
			}
			
			ul.menu li ul li a {
			  background: #ccc;
			  color: #000;
			  padding-left: 20px;
			}
			
			ul.menu li ul li a:hover {
			  background: #aaa;
			  border-left: 5px #000 solid;
			  padding-left: 15px;
			}		
			
			ul.inner2 li a{
			  font-size:xx-small;
			  background: #333;
			  color: #fff;	
			  padding-left: 40px;					
			}		
			
			ul.inner2 li{
				margin-left:5px;
			}
			
	</style>	


	<ul id="MainMenu" class="menu">
		<my:menutree itemList="${mainMenuBean.menuItems }"></my:menutree>
	</ul>	







